<template>
  <!--冒号的作用：类似于v-bind属性绑定-->
  <a-list item-layout="horizontal" :data-source="props.postList">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta class="description" :description="item.content">
          <template #title>
            <a href="" class="title">{{ item.title }}</a>
          </template>
          <template #avatar>
            <a-avatar :src="test" size="large" />
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>
</template>

<script setup lang="ts">
import test from "../assets/test.jpg";
import { withDefaults, defineProps } from "vue";

//定义类型，ts语法
interface Props {
  postList: never[];
}

//接收来自父组件【IndexPage.vue中由<PostList :postList = postList>传入的postList数据】
const props = withDefaults(defineProps<Props>(), {
  postList: () => [],
});
</script>

<style scoped>
.title {
  font-size: 16px; /* 增加title的字体大小 */
}

.description {
  font-size: 14px; /* 增加description的字体大小 */
}
</style>
